<template>
  <div class="detail-wrapper bill-detail-wrapper">
    <PageTitle title="返回激励账单" />

    <div class="detail-content">
      <div class="detail-box">
        <div class="detail-title-box">
          <span>订单概要</span>
        </div>

        <div class="detail-info base-info">
          <div class="info-box">
            <div class="item">
              <p>订单号</p>
              <p>{{ detail.orderSn }}</p>
            </div>
            <div class="item">
              <p>订单类型</p>
              <p>{{ detail.orderType === 1 ? '续费' : '新购' }}</p>
            </div>
            <div class="item">
              <p>订单状态</p>
              <p>{{ handleStatus(detail.status) }}</p>
            </div>
            <div class="item">
              <p>付款类型</p>
              <p>{{ handelPayType(detail.payType) }}</p>
            </div>
            <div class="item">
              <p>客户类型</p>
              <p>{{ detail.accountType === 1 ? '直客' : '伙伴' }}</p>
            </div>
            <div class="item">
              <p>客户归属</p>
              <p>{{ detail.attributionName }}</p>
            </div>
          </div>
          <div class="info-box">
            <div class="item">
              <p>客户账号</p>
              <p>{{ detail.accountName }}</p>
            </div>
            <div class="item">
              <p>支付时间</p>
              <p>{{ detail.payTime }}</p>
            </div>
            <div class="item">
              <p>是否激励</p>
              <p>{{ detail.isSend === 1 ? '是' : '否' }}</p>
            </div>
          </div>
        </div>
      </div>

      <div class="detail-box">
        <div class="detail-title-box">
          <span>激励详情</span>
        </div>

        <div class="detail-info base-info">
          <div class="info-box">
            <div class="item">
              <p>订单原价</p>
              <p>￥{{ detail.orderPrice }}</p>
            </div>
            <div class="item">
              <p>实付金额</p>
              <p>￥{{ detail.payPrice }}</p>
            </div>
            <div class="item">
              <p>激励比例</p>
              <p>{{ detail.incentiveRatio }}</p>
            </div>
            <div class="item">
              <p>激励金额</p>
              <p>{{ detail.incentiveMoney }}</p>
            </div>
            <div class="item">
              <p>账单日期</p>
              <p>{{ detail.orderTime }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { getIncentiveDetail } from '@/api/index';
  import { useRoute } from 'vue-router';
  const route = useRoute();

  import PageTitle from '@/components/PageTitle.vue';

  const detail = ref({});

  function getDetail() {
    getIncentiveDetail({
      id: route.query.id
    }).then(res => {
      console.log(res);
      res.data.orderPrice =parseFloat(res.data.orderPrice.toFixed(2)) 
      res.data.payPrice =parseFloat(res.data.payPrice.toFixed(2)) 
      res.data.incentiveMoney = parseFloat(res.data.incentiveMoney.toFixed(2)) 
      detail.value = res.data;
    });
  }

  function handleStatus(status) {
    const obj = {
      '-1': '已取消',
      0: '待支付',
      1: '已支付',
      2: '已退款'
    };
    return obj[status + ''] || '';
  }

  function handelPayType(type) {
    const typeMap = {
      1: '余额',
      2: '算力券',
      3: '算力券 + 余额'
    };

    return type ? typeMap[type] : '';
  }

  onMounted(() => {
    getDetail();
  });
</script>

<style lang="scss" scoped>
  .bill-detail-wrapper {
    .base-info {
      .info-box {
        display: flex;
        align-items: center;

        &:first-of-type {
          margin-bottom: 40px;
        }

        .item {
          min-width: 200px;
          margin-right: 20px;

          p {
            &:nth-of-type(1) {
              margin-bottom: 10px;
              color: #888;
            }

            .el-text {
              margin-left: 10px;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
</style>
